<template>
  <div class="header-select">
    <h1>致力于电梯安全的维保专家</h1>
    <h5>在线智能报价 10秒获得维保报价单</h5>
    <div class="select">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.elevatorType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="location-width">
          <el-input v-model="formInline.elevatorHeight" placeholder="层高"></el-input>
        </el-form-item>
        <el-form-item class="location-width">
          <el-input v-model="formInline.elevatorCount" placeholder="数量"></el-input>
        </el-form-item>
        <el-form-item class="select-width">
          <el-select v-model="formInline.epibolyType" placeholder="清包">
           <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="iphone-width">
          <el-input v-model="formInline.IPhone" placeholder="您的手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">获取报价</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderSelect",
  data() {
    return {
      // 表单绑定的数据依赖
      formInline: {
        elevatorType: "扶梯", //电梯类型
        elevatorHeight: "", //电梯层高
        elevatorCount: "", //电梯数量
        epibolyType: "清包", //外包类型
        IPhone: "" //手机号
      },
      options: [
        {
          value: "扶梯",
          label: "扶梯"
        },
        {
          value: "直梯",
          label: "直梯"
        },
      ],
      options2: [
        {
          value: "清包",
          label: "清包"
        },
        {
          value: "半包",
          label: "半包"
        },
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      this.formInline =  {
        elevatorType: "扶梯", //电梯类型
        elevatorHeight: "", //电梯层高
        elevatorCount: "", //电梯数量
        epibolyType: "清包", //外包类型
        IPhone: "" //手机号
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.header-select {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 340px;
  width: 940px;
  z-index: 1;
  color: #fff;
  h1 {
    font-size: 40px;
    margin-top: 20px;
  }
  h5 {
    font-size: 20px;
    opacity: 0.7;
    font-weight: 400;
    margin-top: 10px;
  }
  .select {
   margin-top: 30px;
    height: 66px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

<style lang='scss' >
.header-select{
.el-form {
 
  display: flex;
  justify-content: center;
  .el-form-item {
    margin: 0!important;
    .el-input__inner {
      border-radius: 0;
      font-size: 12px;
      text-align: center;
      border: 0;
 
    }
    .el-select {
      width: 100px;

      .el-input__inner {
        color: black;
      }
    }
    .el-button {
      margin-left: 6px;
      border-radius: 0;
    }
  }
  .location-width {
    width: 70px;
  }
  .select-width {
    width: 70px;
    .el-select {
      width: 70px;
      .el-input__inner {
       border-left:1px solid #EEEEEE ;
        padding: 0;
        border-radius:0 5px 5px 0
      }
      .el-input__suffix {
        right: 0px;
      }
    }
  }
  .iphone-width {
    .el-input__inner {
      margin-left: 3px;
      padding: 0;
      padding-left: 15px;
      box-sizing: border-box;
      text-align: left;
       border-radius: 5px ;
    }
  }
}
}

</style>